<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>
<script>
// 采用全部导入的方式
import * as Echarts from 'echarts'
// 导入基础配置数据
import radar from './radar'
export default {
  data() {
    return {
      echarts: null
    }
  },
  // mounted里面执行插件的初始化操作！因为这个时候DOM节点才渲染好！
  mounted() {
    this.echarts = window.echarts.init(this.$refs.myDiv)
    this.echarts = Echarts.init(this.$refs.myDiv)
    this.echarts.setOption(radar)
  },
  beforeDestroy() {
    this.echarts = null
  },
  created() {
    this.loadData()
  },
  methods: {
    // 模拟请求数据
    loadData() {
      setTimeout(() => {
        // 1.获取到了数据
        const value1 = [60, 30, 90, 55, 90, 38]
        const value2 = [85, 14, 28, 26, 42, 21]
        // 2. 设置 基础数据里面去，形成完整的配置数据
        radar.series[0].data[0].value = value1
        radar.series[0].data[1].value = value2
        // 3. 再次调用setOption 重新绘制雷达图
        this.echarts.setOption(radar)
      }, 3000)
    }
  }
}

// 1. 引入echarts的js文件
// 2. 创建一个容器标签，给id选择器，给宽高
// 3. echarts =  Echarts.init(document.getElementById('id'))
// 4. echarts.setOption(配置)

</script>
<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>
